Tooltipni joriy etish: Hover va Fokus orqali qulay ma'lumotlar

Tooltip'lar (maslahat oynalari) — bu foydalanuvchi sichqoncha kursorini biror element ustiga olib kelganda (hover) yoki unga fokuslanganda paydo bo'ladigan kichik, kontekstli yordam xabarlari. Ular qo'shimcha ma'lumot berishi, elementning maqsadini aniqlashtirishi yoki funksiyadan qanday foydalanish bo'yicha maslahatlar taklif qilishi mumkin. Biroq, agar to'g'ri joriy etilmasa, tooltip'lar qulaylik (accessibility) jihatidan jiddiy muammolarga olib kelishi mumkin. Ushbu qo'llanma hamma, shu jumladan imkoniyati cheklangan foydalanuvchilar ham ishlata oladigan tooltip'larni yaratish bo'yicha eng yaxshi amaliyotlarni o'z ichiga oladi.

Nima uchun Tooltip'larda qulaylik muhim?

Qulaylik (accessibility) — bu shunchaki talablarga rioya qilish emas; bu hamma uchun yaxshiroq foydalanuvchi tajribasini yaratishdir. Tooltip'lar qulay bo'lmasa, ekran o'qish dasturlari (screen readers), klaviatura navigatsiyasi yoki nutq orqali kiritish kabi yordamchi texnologiyalarga tayanadigan foydalanuvchilarni chetda qoldirishi mumkin. Quyidagi holatlarni ko'rib chiqing:

• Ekran o'qish dasturi foydalanuvchilari: Agar tooltip to'g'ri belgilanmagan bo'lsa, ekran o'qish dasturi uning mavjudligi yoki tarkibini e'lon qilmasligi mumkin.
• Klaviatura foydalanuvchilari: Agar tooltip faqat sichqoncha bilan ustiga kelganda (hover) paydo bo'lsa, klaviatura foydalanuvchilari unga kira olmaydi.
• Harakatida nuqsoni bor foydalanuvchilar: "Hover" holati uchun talab qilinadigan sichqonchaning aniq harakatlari qiyin yoki imkonsiz bo'lishi mumkin.
• Kognitiv nuqsonlari bo'lgan foydalanuvchilar: Noto'g'ri vaqtda paydo bo'ladigan yoki chalkash tooltip hafsalani pir qilishi va tushunishga xalaqit berishi mumkin.

Qulaylik bo'yicha eng yaxshi amaliyotlarga rioya qilish orqali biz tooltip'lar barcha foydalanuvchilarning tajribasiga xalaqit bermasdan, aksincha, uni yaxshilashini ta'minlay olamiz.

Qulay Tooltip'lar uchun asosiy tamoyillar

Qulay tooltip'larni yaratish uchun quyidagi tamoyillar juda muhim:

1. Muqobil kirishni ta'minlang: Tooltip'larga ham "hover", ham klaviatura fokusi orqali kirish mumkinligiga ishonch hosil qiling.
2. ARIA atributlaridan foydalaning: Yordamchi texnologiyalarga tooltip'larni to'g'ri aniqlash va tavsiflash uchun ARIA (Accessible Rich Internet Applications) atributlaridan foydalaning.
3. Fokusni boshqaring: Tooltip ko'rsatilganda va yashirilganda fokus qayerga o'tishini nazorat qiling.
4. Yetarli kontrastni ta'minlang: Tooltip matni va foni o'rtasida yetarli rang kontrastini ta'minlang.
5. Yetarli vaqt bering: Foydalanuvchilarga tooltip tarkibini o'qish uchun yetarli vaqt bering.
6. Yopish imkoniyatini yarating: Tooltip'ni yopishning aniq usulini ta'minlang.
7. Ortiqcha ishlatishdan saqlaning: Tooltip'lardan tejamkorlik bilan va faqat zarur bo'lganda foydalaning.

Joriy etish usullari

1. Hover va Fokusdan foydalanish

Qulay tooltip'larning eng muhim jihati ularning ham sichqoncha, ham klaviatura foydalanuvchilari uchun qulay bo'lishini ta'minlashdir. Bu shuni anglatadiki, tooltip ham "hover" holatida, ham element fokus olganda paydo bo'lishi kerak.

HTML:

            <a href="#" aria-describedby="tooltip-example">Misol Havola</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Bu misol uchun tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Tooltip yuqorida turishini ta'minlash */
}

            

              
                Copy
              
            
          

Tushuntirish:

• aria-describedby: Bu atribut havolani o'zining ID'si yordamida tooltip elementi bilan bog'laydi. Bu yordamchi texnologiyalarga tooltip havola haqida qo'shimcha ma'lumot berishini bildiradi.
• role="tooltip": Bu ARIA roli elementni tooltip sifatida belgilaydi.
• CSS havolaga sichqoncha olib kelinganda yoki fokuslanganda tooltip'ni ko'rsatish uchun qo'shni element selektoridan (+) foydalanadi.

JavaScript (Kengaytirilgan boshqaruv - Ixtiyoriy):

CSS oddiy ko'rsatish/yashirishni amalga oshira olsa-da, JavaScript, ayniqsa, tooltip'lar dinamik ravishda yaratilganda yoki murakkabroq harakatlarga muhtoj bo'lganda, yanada mustahkam nazoratni ta'minlaydi.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA atributlaridan foydalanish

ARIA atributlari yordamchi texnologiyalarga semantik ma'lumotlarni taqdim etish uchun juda muhimdir. Asosiy atributlarning tahlili quyidagicha:

• aria-describedby: Yuqorida aytib o'tilganidek, bu atribut ishga tushiruvchi element va tooltip elementi o'rtasidagi munosabatni o'rnatadi.
• role="tooltip": Bu atribut elementni aniq tooltip sifatida belgilaydi.
• aria-hidden="true"/aria-hidden="false": Bular tooltip hozirda yordamchi texnologiyalarga ko'rinadimi yoki yo'qligini ko'rsatish uchun ishlatiladi. Tooltip yashirilganda aria-hidden="true" o'rnating. U ko'rinadigan bo'lganda esa aria-hidden="false" o'rnating. Bu, ayniqsa, tooltip ko'rinishini boshqarish uchun JavaScript'dan foydalanganda muhimdir.

Misol:

            <button aria-describedby="help-tooltip">Yuborish</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Formani yuborish uchun shu yerni bosing.</div>
            

              
                Copy
              
            
          

JavaScript (aria-hidden uchun):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Fokusni boshqarish

Tooltip paydo bo'lganda, u odatda fokusni ishga tushiruvchi elementdan *olib qo'ymasligi kerak*. Fokus tooltip'ni ishga tushirgan elementda qolishi kerak. Bu klaviatura foydalanuvchilari sahifada kutilmagan uzilishlarsiz harakatlanishda davom etishini ta'minlaydi.

Biroq, siz fokusni tooltip'ga o'tkazishni *xohlagan* holatlar ham bo'lishi mumkin, ayniqsa tooltip interaktiv elementlarni (masalan, havolalar, tugmalar) o'z ichiga olsa. Bunday holda, quyidagilarga ishonch hosil qiling:

• Tooltip fokusga ega ekanligini bildirish uchun vizual jihatdan ajralib turishi kerak.
• Fokusni asl ishga tushiruvchi elementga qaytarishning aniq usuli bo'lishi kerak (masalan, tooltip ichidagi yopish tugmasi).

Aksariyat hollarda, soddalik va qulaylik uchun tooltip ichida fokusni boshqarishdan qochish afzalroqdir.

4. Yetarli kontrastni ta'minlash

Rang kontrasti o'qish uchun juda muhim. Tooltip'laringizdagi matn rangi fon rangiga nisbatan yetarli kontrastga ega ekanligiga ishonch hosil qiling. Veb-kontentga qulaylik bo'yicha yo'riqnomalar (WCAG) oddiy matn uchun kamida 4.5:1 va katta matn (18pt yoki 14pt qalin) uchun 3:1 kontrast nisbatini tavsiya qiladi.

Rang tanlovlaringiz qulaylik standartlariga mos kelishini tekshirish uchun onlayn kontrast tekshiruvchilaridan foydalaning. Kontrast tekshiruvchilarga misollar:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Misol (Yaxshi kontrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Misol (Yomon kontrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Yetarli vaqt berish

Foydalanuvchilarga tooltip tarkibini o'qish uchun yetarli vaqt kerak. Juda tez yo'qolib qoladigan tooltip'lardan saqlaning. Aniq bir raqam bo'lmasa-da, bir necha soniyalik minimal ko'rsatish vaqtini maqsad qiling. Shuningdek, foydalanuvchi sichqonchani ishga tushiruvchi element ustida ushlab turgan yoki unga fokuslangan ekan, tooltip ko'rinib turishi kerak. Agar boshqa hodisalar tufayli tooltip'ni yopishingiz kerak bo'lsa, tooltip yopilishi haqida indikator taqdim eting.

Agar tooltip tarkibi uzun bo'lsa, foydalanuvchiga tooltip'ni qo'lda yopish imkoniyatini berishni o'ylab ko'ring (masalan, yopish tugmasi yoki Escape klavishini bosish).

6. Ularni yopiladigan qilish

Garchi tooltip'lar ko'pincha foydalanuvchi sichqonchani chetga olganda yoki fokusni olib tashlaganda avtomatik ravishda yo'qolsa-da, ularni qo'lda yopishning aniq usulini taqdim etish yaxshi amaliyotdir, ayniqsa uzun tooltip'lar yoki interaktiv elementlarni o'z ichiga olgan tooltip'lar uchun.

Tooltip'larni yopish usullari:

• Yopish tugmasi: Tooltip ichiga ko'zga ko'rinadigan yopish tugmasini qo'shing.
• Escape klavishi: Foydalanuvchilarga Escape klavishini bosish orqali tooltip'ni yopishga ruxsat bering.
• Tashqarida bosish: Foydalanuvchi tooltip va ishga tushiruvchi elementdan tashqarida istalgan joyga bosganda tooltip'ni yoping. (Ehtiyotkorlik bilan foydalaning, chunki bu xalaqit berishi mumkin).

Misol (Yopish tugmasi):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Bu mening tooltip tarkibim.
  <button onclick="hideTooltip()">Yopish</button>
</div>
            

              
                Copy
              
            
          

Misol (Escape klavishi):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // O'zingizning tooltip yashirish funksiyangiz bilan almashtiring
  }
});

            

              
                Copy
              
            
          

7. Ortiqcha ishlatishdan saqlanish

Tooltip'lardan tejamkorlik bilan va faqat haqiqatan ham foydali ma'lumot berganida foydalanish kerak. Tooltip'larni ortiqcha ishlatish interfeysni murakkablashtirishi, foydalanuvchilarni chalg'itishi va noqulay tajriba yaratishi mumkin.

Tooltip'larga muqobillar:

• Aniq yorliqlar: Forma maydonlari, tugmalar va havolalar uchun aniq va tushunarli yorliqlardan foydalaning.
• Kontekstli yordam: Yordam matnini to'g'ridan-to'g'ri interfeys ichida, tegishli elementlar yonida taqdim eting.
• Yordam hujjatlari: Murakkabroq funksiyalar uchun keng qamrovli yordam hujjatlariga havola bering.

Kengaytirilgan mulohazalar

Dinamik tarkib

Agar sizning tooltip tarkibingiz dinamik ravishda yaratilsa (masalan, API'dan yuklangan yoki foydalanuvchi kiritishiga qarab yangilangan bo'lsa), aria-describedby atributi va tooltip ko'rinishi mos ravishda yangilanishini ta'minlang. Ushbu yangilanishlarni boshqarish uchun JavaScript'dan foydalaning.

Joylashuv

Tooltip'laringizning joylashuvini diqqat bilan o'ylab ko'ring. Ularni muhim tarkibni to'sib qo'yadigan yoki maket siljishiga olib keladigan tarzda joylashtirishdan saqlaning. Turli ekran o'lchamlari va ruxsatlariga e'tibor bering va tooltip'lar har doim ko'rish maydoni (viewport) ichida ko'rinib turishini ta'minlash uchun CSS'dan foydalaning.

Mobil qurilmalar

Tooltip'lar an'anaviy ravishda sensorli qurilmalarda mavjud bo'lmagan "hover" o'zaro ta'sirlariga tayanadi. Mobil qurilmalar uchun quyidagi kabi muqobil o'zaro ta'sir usullaridan foydalanishni o'ylab ko'ring:

• Bosish (Tap): Foydalanuvchi elementni bosganda tooltip'ni ko'rsating.
• Uzoq bosish (Long press): Foydalanuvchi elementni uzoq bosganda tooltip'ni ko'rsating.
• Fokusda ko'rsatish: Element fokus olganda ko'rsating. Bunga JavaScript yordamida, sensorli qo'llab-quvvatlashni tekshirish (masalan, `('ontouchstart' in window)`) va ko'rsatish xatti-harakatini mos ravishda o'zgartirish orqali erishish mumkin.

Tooltip'laringizni sinovdan o'tkazish

Tooltip'laringiz barcha foydalanuvchilar uchun qulay ekanligiga ishonch hosil qilish uchun ularni sinchkovlik bilan sinovdan o'tkazing. Qo'lda sinovdan o'tkazish va avtomatlashtirilgan qulaylikni sinash vositalarining kombinatsiyasidan foydalaning.

Sinov usullari:

• Klaviatura navigatsiyasi: Tooltip'larga klaviatura yordamida kirish mumkinligini tekshiring.
• Ekran o'qish dasturi bilan sinov: Tooltip'lar to'g'ri e'lon qilinishiga ishonch hosil qilish uchun ekran o'qish dasturidan foydalaning.
• Rang kontrasti tahlili: Yetarli kontrastni tekshirish uchun rang kontrasti tekshiruvchisidan foydalaning.
• Mobil sinov: Tooltip'larni turli mobil qurilmalar va ekran o'lchamlarida sinab ko'ring.
• Avtomatlashtirilgan qulaylik sinovi: Potensial qulaylik muammolarini aniqlash uchun axe DevTools, WAVE yoki Lighthouse kabi vositalardan foydalaning.

Internatsionalizatsiya (i18n) va Mahalliylashtirish (l10n)

Global auditoriya uchun tooltip'lar ishlab chiqayotganda, internatsionalizatsiya va mahalliylashtirishni yodda tuting:

• Matn yo'nalishi: Ham chapdan o'ngga (LTR), ham o'ngdan chapga (RTL) matn yo'nalishlarini qo'llab-quvvatlang. Maket uchun jismoniy xususiyatlar (masalan, `margin-left`, `margin-right`) o'rniga CSS mantiqiy xususiyatlaridan (masalan, `margin-inline-start`, `margin-inline-end`) foydalaning.
• Tilga xos tarjimalar: Turli tillar uchun tooltip tarkibining tarjimalarini taqdim eting.
• Sana va vaqt formatlari: Sana va vaqt formatlarini foydalanuvchining mahalliy sozlamalariga moslashtiring.
• Raqam formatlari: Turli mintaqalar uchun mos raqam formatlaridan foydalaning (masalan, kasr ajratgichlari, minglik ajratgichlari).

Xulosa

Qulay tooltip'larni joriy etish sinchkovlik bilan rejalashtirishni va detallarga e'tibor berishni talab qiladi. Ushbu qo'llanmada keltirilgan tamoyillar va usullarga rioya qilish orqali siz, qobiliyatidan qat'i nazar, hamma uchun qulay bo'lgan tooltip'larni yaratishingiz mumkin. Yodda tutingki, qulaylik — bu davomiy jarayon, shuning uchun tooltip'laringiz barcha foydalanuvchilaringizning ehtiyojlariga javob berishini ta'minlash uchun ularni sinab ko'rishda va takomillashtirishda davom eting.

Manbalar

• ARIA Yaratish Amaliyotlari Qo'llanmasi (APG) - Tooltip
• Veb Kontentiga Qulaylik Bo'yicha Yo'riqnomalar (WCAG) 2.1
• MDN Veb Hujjatlari - ARIA